@border-color: #e3e3e3;

.layoutBox {
  height: calc(100vh - 200px);
  border: 1px solid;
  border-color: @border-color;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  box-shadow: 0 8px 10px 0 #ccc;
  overflow: auto;

  .compItem {
    // min-height: 50px;
    transition: 0.1s;
    display: flex;
		flex-direction: column;
    background-color: #fff;
    // border: 1px solid #ccc;
    position: relative;
		border-radius: 4px;
    padding: 15px 10px;

		.tit{
			// padding: 5px 10px;
			font-size: 16px;
      padding-bottom: 0;
      margin-bottom: 4px;
      margin-right: 10px;
      display: flex;
      white-space: nowrap;
      .req{
        color: crimson;
      }
		}
    .item{
      display: flex;
      flex-grow: 1;
    }
    .desc{
      width: 100%;
      font-size: 12px;
      color: #999;
      // padding: 5px 10px;
      padding-top: 0;
      margin-top: 5px;
      word-wrap:break-word;
    }

    .upload{
      width: 100%;
      border:1px dashed deepskyblue;
      background-color: #fff;
      padding: 10px;
      text-align: center;
      .icon{
        font-size: 18px;
        color: darkseagreen;
      }
      span{
        color: #666;
        font-size: 14px;
        margin-left: 5px;
      }
    }
    .selectBtn{
      border:1px dashed burlywood;
      background-color: #fff;
      padding: 5px;
      text-align: center;
    }

    .editbar {
      position: absolute;
      top: 4px;
      right: 4px;
			font-size: 12px;
      .del {
        margin-right: 5px;
        cursor: pointer;
				color: coral;
      }

      .copy {
        cursor: pointer;
				color: deepskyblue;
      }
    }

    .splitLine{
      display: flex;
      flex-direction: column;
      .tit{

      }
      .divider{
        height: 1px;
        margin: 5px 0;
      }
      .splitDesc{
        font-size: 12px;
        color: #999;
      }
    }
    .placeBlock{
      height: 20px;
      background-color: #f3f3f3;
    }
  }
  .compItem-inline{
    flex-direction: row;
    flex-wrap: nowrap;
  }
	.compItem:hover{
		background-color: #f3f3f3;
	}

  .over {
    border: 1px dashed;
    border-color: lightcoral;
  }

  .act {
    // border: 1px solid;
    // border-color: #e6f7ff;
    background-color: #e6f7ff;
  }

  .width-1{ width: 100%; }
	.width-2{ width: 75%; }
	.width-3{ width: 50%; }
	.width-4{ width: 33.3333%; }
	.width-5{ width: 25%; }
}
